<!--
  厦门大学计算机专业 | 华为开发专家(HDE)
  专注《零基础学编程系列》  http://lblbc.cn/blog
  包含：鸿蒙 | Java | 安卓 | 前端 | Flutter | iOS | 小程序
  公众号：蓝不蓝编程
  -->
  <script setup lang="ts">
  import {ref} from 'vue'
  const num1 = ref('0')
  const num2 = ref('0')
  const num3 = ref('0')
  const num4 = ref('0')
  const num5 = ref('0')
  const num6 = ref('0')
  const num7 = ref('0')
  function random(maxNum:number){
    return Math.floor(Math.random()*maxNum)+1+''
  }
  function createNums(){
    num1.value = random(33)
    num2.value = random(33)
    num3.value = random(33)
    num4.value = random(33)
    num5.value = random(33)
    num6.value = random(33)
    num7.value = random(16)
  }
  </script>
  
  <template>
   <div class="column">
    <div class="row">
      <div class="num">{{ num1 }}</div>
      <div class="num">{{ num2 }}</div>
      <div class="num">{{ num3 }}</div>
      <div class="num">{{ num4 }}</div>
      <div class="num">{{ num5 }}</div>
      <div class="num">{{ num6 }}</div>
      <div class="num">{{ num7 }}</div>
    </div>
    <div class="button" @click="createNums">生成</div>
   </div>
  </template>
  
  <style scoped>
  .column{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .row{
    display: flex;
    flex-direction: row;
  }
  .num{
    color: black;
    height: 40px;
    width: 40px;
    border-radius: 20px;
    border: 1px solid gray;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
  }
  .button{
    background-color: #489cf5;
    color: white;
    width: 100px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    cursor: pointer;
  }
  </style>
  